<template>
	<view>
		<!-- <uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight(0)" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" title=" ">

		</uni-nav-bar> -->
		<view class="topView">
		<!-- 	<view class="flex-column-center">
				<image class="logo" src="/static/common/logo1.png" mode=""></image>
				<view class="name">
					通勤车
				</view>
			</view> -->
				<view @click="ceshi()" class="title1">
				账号
			</view>
			<view class="phoneView flex-row-space-between">
				<input v-model="username" type="text" value="" placeholder="输入账号" />
			</view>
			<view class="line">

			</view>
			<view class="title1">
				密码
			</view>
			<view class="phoneView flex-row-space-between">
				<input v-model="password" type="text" value="" placeholder="输入验证码" />
			</view>
			<view class="line">

			</view>

			<!-- <view class="flex-row-center"> -->
			<view  @click="loginMobile()" class="loginButton flex-row-center">
				手机一键登录
			</view>
		<!-- 	<button v-if="isTong" class="loginButton flex-row-center" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">手机一键登录</button> -->
				<view @click="noLogo" class="" style="text-align: center;color: red;">
					暂不登录
				</view>
			<!-- </view> -->
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button> -->
		</view>
		<view class="xyTitle fixed-bottom flex-row-center">
			<uni-icons @click="isTongClick()" v-if="!isTong" type="circle" size="20" color="#00000050"></uni-icons>
			<uni-icons @click="isTongClick()" v-if="isTong" type="checkbox" size="20" color="#3F81FF"></uni-icons>
			<text @click="isTongClick()" class="">
				我已阅读并同意
			</text>
			<text @click="toUrl('/pages/login/richText?title=用户协议')" class="baseColor">
				用户协议
			</text>
			<text class="">
				和
			</text>
			<text @click="toUrl('/pages/login/richText?title=隐私协议')" class="baseColor">
				隐私协议
			</text>
		</view>
	</view>
</template>

<script>
	import {
		mobilelogin,
		// smsSend
	} from '@/api/index.js'
	import {
		login,
		third,
		getCurrentUserInfo
	} from '@/api/user.js'

	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				isTong: false,
				clock: 60,
				clockText: '验证码',
				username: 'happybin',
				password: '123456',
				border: false,


			}
		},
		onShow() {

		},
		onLoad() {

		},

		methods: {
			noLogo(){
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			getPhoneNumber(e) {
				let that = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {

								
						third({
								code: loginRes.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
							}
							
							)
							.then(res => {
							
								if (Number(res.code) == 1) {
									uni.showToast({
										title: '登录成功',
										icon: 'none'
									})
								
									uni.setStorageSync('token', res.data.userinfo.token)
									uni.setStorageSync('userinfo', res.data.userinfo)
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/index/index"
										})
									}, 1500)
								}


							})
							.catch(err => {

							})
						console.log('登录', loginRes);
					}
				})
				console.log('手机号', e)
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			isTongClick() {
				this.isTong = !this.isTong
			},
			codeClick() {

				if (!this.mobile.length) {
					this.showToast('请输入手机号')
					return
				}
				if (this.clockText != '验证码') {
					return
				}

				smsSend({
						mobile: this.mobile,
						event: 'mobilelogin',
					})
					.then(res => {
						this.showToast(res.msg)
						this.daojishi()
					})
					.catch(err => {

					})

			},
			daojishi() {
				this.clock = 60;
				let timer = setInterval(() => {
					this.clock--;
					this.clockText = `${this.clock} 秒`

					if (this.clock < 1) {
						clearInterval(timer);
						this.clockText = '验证码'
						this.clock = 0
					}
				}, 1000)
			},
			ceshi() {
				// this.mobile = '18503733787'
				// this.captcha = '123456'
				// this.loginMobile()
			},
			//获取用户信息
			getCurrentUserInfo() {
				getCurrentUserInfo({

					})
					.then(res => {

						this.showToast(res.msg)
						uni.setStorageSync('userinfo', res.user)
						uni.setStorageSync('roles', res.roles)
						// uni.setStorageSync('token', res.data.userinfo.token)
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/my/my"
							})
						}, 2000)
					})
					.catch(err => {

					})
			},
			loginMobile() {
				// this.showToast('请同意协议')
				// return
				var that = this
				// if(!this.isTong){
				// 	this.showToast('请先同意协议')
				// 	return
				// }
				if (!this.username.length) {
					this.showToast('请输入手机号')
					return
				}
				if (!this.password.length) {
					this.showToast('请输入密码')
					return
				}
				login({
						account: this.username,
						password: this.password,
					})
					.then(res => {
						console.log(res)
						uni.setStorageSync('token', res.data.userinfo.token)
						uni.setStorageSync('userinfo', res.data.userinfo)
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 1500)
						// that.getCurrentUserInfo()
						// this.showToast(res.msg)
						// uni.setStorageSync('userinfo', res.data.userinfo)
						// uni.setStorageSync('token', res.data.userinfo.token)
						// setTimeout(() => {
						// 	uni.switchTab({
						// 		url: "/pages/index/index"
						// 	})
						// }, 2000)
					})
					.catch(err => {

					})
			},

			clickLeft() {
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		
	}

	.name {
		margin-top: 40rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.topView {
		padding-top: 220px;
	}

	.title {
		margin-left: 30px;
		font-size: 24px;
		font-weight: normal;
		letter-spacing: 0em;
		color: #333333;
	}

	.register {
		margin-right: 30px;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0em;
		/* 注册 */

		position: absolute;
		left: 317px;
		top: 119px;
		width: 28px;
		height: 20px;
		opacity: 1;

		font-family: PingFangSC-Regular;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0em;

		/* 主色 */
		color: $base-color;
	}

	.title1 {
		margin-top: 20px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 0em;
		color: #333333;
	}

	.phoneView {
		margin: 0 30px;
		height: 45px;

		input {
			font-size: 14px;
			color: #333333;
		}
	}

	.line {
		margin: 0 30px;
		height: 1px;
		background: #EEEEEE;
	}

	.verification {
		text-align: right;
		width: 100px;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0em;

		/* 主色 */
		color: $base-color;

	}

	.loginButton {
		margin: 88px 30px;
		height: 50px;
		border-radius: 4px;
		opacity: 1;

		/* 主色 */
		background: $base-color;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 0em;

		color: #FFFFFF;
	}

	.xyTitle {
		margin-bottom: 30px;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0em;

		/* 我已阅读并同意 */
		color: #999999;

		image {
			margin-right: 4px;
			width: 16px;
			height: 16px;
		}
	}
</style>